<template>
  <div class="dcq-popup-select" :style="{top:top,left:left}">
      <el-select popper-class="select-pop-view"
          v-model="value"
          filterable
          remote
          style="width: 100%;"
          clearable
          reserve-keyword
          placeholder="请输入关键词"
          @change="changeItem"
          :remote-method="remoteMethod"
          :loading="loading">
          <template #prefix>
              <i class="vxe-icon-search"></i>
          </template>
          <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id">
           <div class="select-item">
               <div><i class="vxe-icon-location" style="color: #04AE70;font-size:16px;"></i>{{item.name}}</div>
               <div style="padding-top:4px" :title="item.address" >{{item.address}}</div>
           </div>
          </el-option>
      </el-select>
  </div>
</template>

<script setup>
import {ref,reactive,onMounted,watch} from "vue"
import { message } from '@/utils/element'
import fetchJsonp from 'fetch-jsonp';
import { gcj02towgs84 } from '../utils/wgs84ToGaode'

const emits = defineEmits(['change'])
const props = defineProps({
  popOption:{
      type:Object,
      default(){return {}}
  },
  top:{
    type:String,
    default:'10px'
  },
  left:{
    type:String,
    default:'20px'
  }
})
const options = ref([])
const value =ref('')
const loading = ref(false)
const remoteMethod=(query)=>{   
  fetchData(query)
}
// 调用腾讯地图搜索
const fetchData = async (keyword) => {
const apiKey = import.meta.env.VITE_QQ_KEY;
const page =1;
const pageSize = 20;
const keywordSearch = encodeURIComponent(keyword);
const apiUrl = `https://apis.map.qq.com/ws/place/v1/suggestion?region=&keyword=${keywordSearch}&key=${apiKey}&output=jsonp&page_index=${page}&page_size=${pageSize}`;

try {
  const response = await fetchJsonp(apiUrl);
  const data = await response.json();
  if (data.status == 0) {
    const suggestions = data.data.map((suggestion) => ({
      id: suggestion.id,
      name: suggestion.title,
      address: suggestion.address,
      cityname: suggestion.city,
      adname: suggestion.adcode,
      location:gcj02towgs84(suggestion.location.lng,suggestion.location.lat).lat + ',' + gcj02towgs84(suggestion.location.lng,suggestion.location.lat).lng,
      latitude:gcj02towgs84(suggestion.location.lng,suggestion.location.lat).lat,
      longitude:gcj02towgs84(suggestion.location.lng,suggestion.location.lat).lng,
      photos: suggestion.photos || [],
      city: suggestion.city,
      district: suggestion.district,
      province: suggestion.province,
    }));
    options.value = suggestions;
  } else {
      message('查询失败！',3);
  }
} catch (error) {
  message('请求失败',3);
} finally {
  loading.value = false;
}
};
// 字符高亮
const highlightKeyword=(name, keyword)=> {
let highlightedName = name;
keyword = keyword.trim()
// 对keyword中的每个字符单独进行处理
highlightedName = highlightedName.replace(new RegExp(keyword, 'gi'), (match) => {
  return `<span class="highlight" style="color: #04ae70">${match}</span>`;
});
return highlightedName;
}
const changeItem=(val)=> {
 let itemObj= options.value.find(item=>item.id==val)
 if(itemObj){
  emits('change', {...itemObj,search:true})
 }
}
</script>

<style lang="scss" scoped>
.dcq-popup-select{
  position: absolute;
  z-index: 99;
  top:10px;
  left:20px;
  width:320px;

}
.select-pop-view  .el-select-dropdown__item{
      height: auto;
      line-height: normal;
      padding: 0;
  }
  .select-item{
      border-bottom: 1px solid #ddd;
      font-size: 14px;
      padding: 6px 10px;
      max-width:300px;
      div{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }
  }
</style>